<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
      xmlns:shiro="http://www.w3.org/1999/xhtml">

<head th:include="common/Head :: headCss">

</head>
<div>


    <!--
     <link href="../bootstrap/js/project/sys/shop/css/datatables.min.css" rel="stylesheet">

    <link rel="stylesheet" href="../bootstrap/js/dept/css/bootstrap-table.min.css">
    -->

    <link href="/bootstrap/js/project/sys/shop/css/fileinput.min.css" rel="stylesheet">


    <link rel="stylesheet" type="text/css" href="/bootstrap/dataTable/datatables.min.css"/>


    <style type="text/css">
        .table > tbody > tr > td {
            text-align: center;
        }

        /* dataTables表头居中 */
        .table > thead:first-child > tr:first-child > th {
            text-align: center;
        }
    </style>
</div>
<body>
<div id="wrapper">
    <nav th:include="common/Left_Ment :: left"></nav>
    <div id="page-wrapper" class="gray-bg">
        <div th:include="common/Head :: head"></div>
        <div class="wrapper wrapper-content animated fadeInRight" v-show="showList">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <i class="fa fa-wrench"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-user">
                                    <li><a href="#">Config option 1</a>
                                    </li>
                                    <li><a href="#">Config option 2</a>
                                    </li>
                                </ul>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="table-responsive">
                                <div class="grid-btn">
                                    <!--<a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
                                    <a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
                                    <a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>-->
                                    <!--
                                     <a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
                                     <a class="btn btn-success" @click="del"><i
                                             class="fa fa-plus-square"></i>&nbsp;上架</a>
                                     <a class="btn btn-success" @click="del"><i
                                             class="fa fa-minus-square"></i>&nbsp;下架</a> -->
                                </div>
                                <table class="table table-striped table-bordered table-hover dataTables-example">
                                    <thead>
                                    <tr>
                                        <th>订单ID</th>
                                        <th>订单编码</th>
                                        <th>订单状态</th>
                                        <th>订单总价</th>
                                        <th>订单完成时间</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tfoot>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div>
                <strong>Copyright</strong> 星记云典 Company &copy; 2014-2017
            </div>
        </div>

    </div>
</div>
<div th:include="common/Head :: js"></div>

<script src="/bootstrap/js/dept/js/vue.min.js"></script>


<script src="/bootstrap/js/dept/js/bootstrapValidator.js"></script>

<script src="/bootstrap/js/project/sys/shop/js/fileinput.min.js"></script>
<script src="/bootstrap/js/project/sys/shop/js/zh.js"></script>
<script src="/bootstrap/js/project/sys/shop/js/shopData.js"></script>


<script type="text/javascript" src="/bootstrap/dataTable/datatables.min.js"></script>


<!-- Page-Level Scripts -->
<script>

    var data;

    $(document).ready(function () {
        yuheUtils.bindPersonalSetting();


        $("#orderMange").attr("class", "active");
        $("#orderMange_ul").attr("class", "nav nav-second-level collapse in");

        $("#orderMange").attr("class", "active");


        $('.dataTables-example').DataTable({
            pageLength: 10,
            responsive: true,
            //  dom: '<"html5buttons"B>f',
            dom: '<"html5buttons"B>f<"top">rt<"bottom"lp>i<"clear">',
            pagingType: "full_numbers",
            destroy: true,
            colReorder: true,
            responsive: true,
            language: {
                "sLengthMenu": "每页显示 _MENU_条",
                "paginate": {
                    "last": "最后一页",
                    "first": "第一页",
                    "next": "下一页",
                    "previous": "上一页",
                    "show": "显示"
                },
                zeroRecords: "没有内容",//table tbody内容为空时，tbody的内容。
                //下面三者构成了总体的左下角的内容。
                info: "总共_PAGES_ 页，显示第_START_ 到第 _END_ ，筛选之后得到 _TOTAL_ 条，初始_MAX_ 条 ",//左下角的信息显示，大写的词为关键字。
                infoEmpty: "0条记录",//筛选为空时左下角的显示。
                infoFiltered: "",//筛选之后的左下角筛选提示，
                buttons: {
                    "colvis": "列可见性",
                    "print": "打印",
                    "copy": "复制数据",
                },
                editor: {
                    "Update": "更新",
                }

            },
            buttons: [
                {extend: 'colvis'},
                {
                    extend: 'print',
                    customize: function (win) {
                        $(win.document.body).addClass('white-bg');
                        $(win.document.body).css('font-size', '10px');

                        $(win.document.body).find('table')
                            .addClass('compact')
                            .css('font-size', 'inherit');
                    }
                },
                {extend: 'copy'},
                {extend: 'csv'},
                {extend: 'excel', title: 'ExampleFile'},
                {extend: 'pdf', title: 'ExampleFile'}
            ],
            ajax:
                {
                    url: "/order/manage/listData",
                    dataSrc:  function (data) {
                        console.log(data)
                        return data.orderList;
                    }
                    ,
                    dataType: 'json',
                    type: "post",
                }
            ,
            columns: [

                {data: "id"},
                {data: "borderNum"},
                {data: "status"},
                {data: "totalPrice"},
                {data: "endTime"},
                {data: "a"}

            ],
            aoColumnDefs: [
                /*{
                    "render": function (data, type) {
                        return "<div align='center'><input type='radio' name='radio' value='" + data.id + "' ></div>";
                    },
                    "aTargets": 0 //第一列
                },*/
                {
                    "render": function (data, type) {
                        // 订单状态：0-已取消；30-待支付；60-已支付待发货；90-已发货
                        switch (Number(data)) {
                            case 0:
                                return '已取消';
                            case 30:
                                return '待支付';
                            case 60:
                                return '已支付待发货';
                            case 90:
                                return '已发货';
                            default:
                                return data;
                        }
                    },
                    "aTargets": 2
                },
                {
                    "render": function (data, type) {
                        if (data!=null) {
                            return new Date(data).Format("yyyy-MM-dd hh:mm:ss");
                        } else {
                            return '';
                        }
                    },
                    "aTargets": 4
                },
                {
                    "render": function (data,type,row) {

                        return '<button style="margin-bottom: 0" class="btn btn-primary btn-xs btn-outline"  onclick =orderDetail(' + "'" + row.borderNum + "'" + ')>&nbsp;订单详情</button>'
                            +'&nbsp;'+'<button style="margin-bottom: 0" class="btn btn-primary btn-xs btn-outline"  onclick =outGoods(' + "'" + row.status+ "'"+ ',' + "'" + row.borderNum + "'" + ')>&nbsp;发货</button>'
                    },
                    "aTargets": 5
                },
            ],
           columnDefs:
                [
                    {orderable: false, targets: 0},
                    {width: "15%", orderable: false, targets: 5}
                ],
            order:
                [1, 'asc']
        })
        ;


    });
    //对Date 类进行扩展
    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

    function detail(shopId) {
        top.layer.open({
            type: 2,
            title: '照片详情查看',
            shadeClose: true,
            shade: 0.1,
            scrollbar: true,
            area: ['80%', '80%'],
            content: '/shop/pictureCarousel?shopId=' + shopId
        })
    }


    /*$('.dataTables-example').on('click','tr', function() {
        var borderNum = $($(this).find('td')[1]).text();
        if (borderNum) {
            layer.open({
                type: 2,
                title: '订单详情',
                shadeClose: true,
                shade: 0.1,
                scrollbar: true,
                area: ['70%', '90%'],
                content: '/order/manage/detail?bOrderNum=' + borderNum
            });
        }
    });*/
    //订单详情
    function orderDetail(borderNum){
            layer.open({
                type: 2,
                title: '订单详情',
                shadeClose: true,
                shade: 0.1,
                scrollbar: true,
                area: ['70%', '90%'],
                content: '/order/manage/detail?bOrderNum=' + borderNum
            });


    }
    /*function refund(id) {

        $.ajax({
            type: "POST",
            url: "/touristShop/refund",
            dataType: "json",
            data: {"outTradeNo": id},
            success: function (r) {

            }
        })
        console.log(id)
    }*/
    //发货/order/manage/updateStaus?bOrderNum=' + borderNum
    function outGoods(status,borderNum) {
        if (status==='60') {
            layer.confirm("是否确认发货？", { btn: ["确定","取消"]  }, function(){
                $.ajax({
                type: "get",
                url: '/order/manage/updateStaus?bOrderNum='+borderNum,
                dataType: "json",
                success: function (r) {
                    if(r.Status===0){
                        layer.msg('发货成功', {icon:1 , time: 1000})
                        var table = $('.dataTables-example').DataTable();
                        table.ajax.reload();
                    }else{
                        layer.msg('发货失败', {icon:2 , time: 1000})
                    }
                }
            })
            });

        }else{
            layer.msg('未支付不能发货', {icon:2 , time: 1000})
        }
    }
    $(function () {
        var $thisA = $('a[href="/order/manage/list"]');
        $thisA.parent().attr("class", "active");
        $thisA.parent().parent().attr("class", "nav nav-second-level collapse in");
    })


</script>

</body>

</html>
